<template>
    
    <!-- 组件的模板 -->
    <div class="page show-topbar signin" :class="{'pad_bottom_165': signDate == today, 'blur': insurance || insurance_success}">
        <div class="topbar">
            <span class="date" @click="selectDate"><span class="bg_sprite icon-calendar"></span>{{signDateArr[0]}}年{{signDateArr[1]}}月{{signDateArr[2]}}日</span>
            <span class="time">已上报<em>{{sign_amount}}</em>次</span>
        </div>
        <div class="process">
            <template v-for="item in sign_list">
                <div class="module" v-if="item.sign_type == 1">
                    <span class="bg_sprite state state_2"></span>
                    <span class="line"></span>
                    <div class="wrap">
                        <div class="top">
                            <span class="title">扫码签到</span>
                            <div class="fr"><span class="time">{{item.sign_time}}</span></div>
                        </div>
                    </div>
                </div>
                <div class="module" v-if="item.sign_type == 0">
                    <span class="bg_sprite state state_2"></span>
                    <span class="line"></span>
                    <div class="wrap">
                        <div class="flex">
                            <!-- <img v-if="item.imgArr.thumb_url.length > 0" class="pic" :src="item.imgArr.thumb_url[0]" alt="" @click="bigPicturePreview(item.imgArr.thumb_url)"> -->
                            <div v-if="item.imgArr&&item.imgArr.thumb_url.length > 0" class="pic img" :style="'background-image:url('+item.imgArr.thumb_url[0]+');'" @click="bigPicturePreview(item.imgArr.url)"></div>
                            <div class="info" @click="gotoPersonalFootprint(item)">
                                <div class="top">
                                    <span class="title">{{item.form_data[0].value.addr_name}}</span>                            
                                    <div class="fr"><span class="time">{{item.sign_time}}</span></div>
                                </div>
                                <p class="location"><span class="bg_sprite icon-location"></span>{{item.form_data[0].value.addr}}</p>    
                            </div> 
                        </div>               
                    </div>
                </div>
            </template>
        </div>

        <!-- <empty :show-empty="showEmpty" :msg="'今日暂无签到记录'"></empty> -->
        <!-- <div class="page" v-show="this.signDate != this.today && showEmpty"> -->
        <div class="page" v-show="showEmpty">
            <div class="mod-empty">
                <div class="icon icon_5"></div>
                <p class="tip">今日无位置上报记录</p>
            </div>
        </div>

        <!-- <div class="mask" v-if='this.signDate == this.today'>
            <p class="tip" v-show="showEmpty">开始愉快的工作吧~</p>
            <a class="btn_signin" href="javascript:;" @click="checkoutLocation">上报<em>{{todayTime}}</em></a>
            <div class="location">
                <div class="wrap">
                    <a href="javascript:;" v-if='position_tune == 1' @click="resetLocation">地点微调</a>
                    <p :class="{'mar_r_0': position_tune == 0}">
                        <span class="bg_sprite icon_location"></span>
                        {{location_info.name || tipMsg}}
                    </p>
                </div>
            </div>
        </div> -->
    </div>
    <template v-if="insurance">
        <div class="weui-mask" style="background: rgba(0, 0, 0, 0.75);"></div>
        <div class="popup_insurance">
            <p class="tip">斗米兼职为您免费办理保险，请输入 真实姓名、身份证领取保险</p>
            <div class="form-wrap">
                <div class="item">
                    <input type="text" name="" placeholder="真实姓名" v-model="realName">
                </div>
                <div class="item">
                    <input type="text" name="" placeholder="身份证号码" v-model="identityCode">
                </div>            
                <a class="button" href="javascript:;" @click="receiveInsurance">领取保险</a>
                <p class="link"><a href="javascript:;" @click="latterReceive">稍后领取</a></p>
            </div>
        </div>
    </template>

    <template v-if="insurance_success">
        <div class="weui-mask" style="background: rgba(0, 0, 0, 0.75);" @click="receiveSuccess"></div>
        <div class="popup_insurance_success" @click="receiveSuccess">
            <img class="icon_insurance" src="../../static/imgs/icon_insurance.png" alt="">
            <span class="tip">领取成功!</span>
        </div>
    </template>
</template>

<script>
    let getDataEnd = true
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import * as util from 'js/util.js'
    import location from 'gapi/location.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import clientUi from 'gapi/clientUi.js'
    import clientInfo from 'gapi/clientInfo.js'
    import teamApi from 'clientApi/teamApi.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import Empty from 'components/Empty/Empty'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            Empty
        },
        data: function(){
            return{
                tipMsg: '定位中',
                showEmpty: false,
                today: '',
                todayTime: '',
                position_tune: 0,//是否允许地点微调
                tune_distance: 300,//微调范围
                signDate: '',   //签到日期
                team_id: 0,
                project_id: 0,
                user_id: 0,
                page_no: 1,
                page_size: 20,
                location_info: {
                    coordinate: '',
                    address: '',
                    name: ''
                },
                user_name: '',
                sign_amount: 0, //签到次数
                sign_list: [
                    // {
                    //     "sign_type": "0",
                    //     "sign_time": "19:34",
                    //     "position_name": "名人世纪汽车",
                    //     "address": "北京市海淀区马连临101号",
                    //     "coordinate": "116.293418,40.040536",//坐标经纬度
                    //     "photo": ["http://sta.doumi.com/cgi/placeholder.php?size=48x48","http://sta.doumi.com/cgi/placeholder.php?size=48x48"],
                    //     remark: '这是备注信息这是备注信息这是备注信息这是备注信息'
                    // },
                    // {
                    //     sign_type: 1,//扫码签到(现场签到)
                    //     sign_time: "17:10"
                    // }
                ],
                avatar: '',//当前用户头像
                insurance: false,//是否弹出领取保险
                insurance_success: false,//领取成功
                identityCode: '',//领取保险人身份证号码
                realName: '',//领取保险人填写姓名
                mobile: 0,//领取保险时带来的手机号
                require_field:[]
            }
        },
        computed:{
            signDateArr: function(){
                return this.signDate.split('-')
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                // alert(window.location.href)
                
                //当日日期
                let date = new Date()
                let timestr = date.getTime()
                this.today = this.signDate = util.getLocalTime(timestr, 'yyyy-MM-dd')
                this.todayTime = util.getLocalTime(timestr, 'HH:mm')

                //页面3分钟重定位
                // let intervalCont = 0
                // setInterval(() => {
                //     intervalCont ++ 
                //     timestr += 30000
                //     if(intervalCont == 6){
                //         this.requestPOI()
                //         intervalCont = 0
                //     }
                //     this.todayTime = util.getLocalTime(timestr, 'HH:mm')
                // }, 30000)

                // alert(1)
                //定位信息
                // location.requestPOI((data) => {
                //     // alert(JSON.stringify(data))
                //     if(data&&data.lon != undefined){
                //         // this.location_info.lat = data.lat
                //         // this.location_info.lon = data.lon
                //         this.location_info.coordinate = data.lon + "," + data.lat
                //         this.location_info.address = data.district + data.streetName
                //         this.location_info.name = data.name
                //     }else{
                        
                //         // if(util.OS()=='ios'){//判断是否需要引导开启定位
                //             KCApiApp.showLocationAuthAlertDialog()
                //         // }else{
                //         //     widget.toast('获取地理位置失败')
                //         // }
                //         this.tipMsg = '定位失败'
                //     }  
                // })
                //缓存用户信息
                this.team_id = util.getQueryString('team_id') || util.getUrddataString('team_id')
                this.project_id = util.getQueryString('project_id') || util.getUrddataString('project_id')
                this.user_id = util.getQueryString('user_id')
                cache.setCache('user_info_sign', {
                    team_id: this.team_id,
                    project_id: this.project_id,
                    user_id: this.user_id
                }, 100000)
                // cache.setCache('KqCacheMessge', {
                //     team_id: this.team_id,
                //     project_id: this.project_id
                // }, 100000)

                // return
                //获取第一页
                this.firstGetData()
                //分页
                util.scrollPageEnd(this.getMoreData)

                //获取设置信息(是否允许地点微调及范围)
                // commonPage.loadPageStatus('loading')
                // util.ajax({
                //     url: '/sign/project/setting',
                //     type:'GET',
                //     data: {
                //         team_id: this.team_id,
                //         project_id: this.project_id
                //     },
                //     success: (res) => {
                //         // alert(JSON.stringify(res))
                //         commonPage.loadPageStatus('loadSuccess')
                //         if(res&&res.errno==0){
                //             this.position_tune = res.data.setting_data.position_tune
                //             this.tune_distance = res.data.setting_data.tune_distance
                //         }else if(res.errmsg){
                //              widget.toast(res.errmsg)
                //         }else{
                //             widget.toast('数据获取失败')
                //         }
                //     },
                //     error: (xhr, error) => {
                //         commonPage.loadPageStatus('loadSuccess')
                //         widget.toast('服务器异常')
                //     },
                //     noNetwork: () => {
                //         // 无网络的回调
                //         commonPage.loadPageStatus('loadSuccess')
                //         widget.toast('网络连接失败，请检查网络')
                //     }
                // })

                // 判断所在团队是否有保险应用  之后再掉完善资料接口
                // commonPage.loadPageStatus('loading')
                // util.ajax({
                //     url: '/application/vision/area',
                //     type: 'GET',
                //     data: {
                //         team_id: this.team_id,
                //         project_id: this.project_id
                //     },
                //     timeout: 10000,
                //     success: (data) => {
                //         // success
                //         // alert(JSON.stringify(data))
                //         console.log('app')
                //         console.log(data)
                //         commonPage.loadPageStatus('loadSuccess')
                //         if(data.errno == 0){
                //             data.data.result.forEach((obj) => {
                //                 if(obj.app_id == 5){
                //                     // alert(123)
                //                     //是否购买保险
                //                     //判断是否领取保险
                //                     // console.log(this.user_id)
                //                     // return
                //                     commonPage.loadPageStatus('loading')
                //                     util.ajax({
                //                         url: '/insurance/user_info/get',
                //                         type: 'GET',
                //                         data: {
                //                             team_id: this.team_id,
                //                             project_id: this.project_id,
                //                             type: 2//区分是考勤(1)还是签到(2)
                //                         },
                //                         timeout: 10000,
                //                         success: (data) => {
                //                             // success
                //                             // alert(JSON.stringify(data))
                //                             console.log(data)
                //                             commonPage.loadPageStatus('loadSuccess')
                //                             if(data.errno == 0){
                //                                 if(data.data[0].status == 1){//需要填写
                //                                     this.insurance = true
                //                                     this.identityCode = data.data[0].info.id_number ? data.data[0].info.id_number : ''
                //                                     this.realName = data.data[0].info.name ? data.data[0].info.name : ''
                //                                     this.user_id = data.data[0].info.user_id
                //                                     this.mobile = data.data[0].info.mobile

                //                                     //调用API隐藏底部tabBar
                //                                     teamApi.updateBottomStatus(0)
                //                                 }
                //                             }else{
                //                                 // widget.toast(data.errmsg)
                //                                 // alert(JSON.stringify(data))
                //                             }
                //                         },
                //                         error: (xhr, status) => {
                //                             commonPage.loadPageStatus('loadSuccess')
                //                             widget.toast('服务器异常')
                //                             // error
                //                         },
                //                         noNetwork: () => {
                //                             // 无网络的回调
                //                             commonPage.loadPageStatus('loadSuccess')
                //                             widget.toast('网络连接失败，请检查网络')
                //                         }
                //                     })
                //                 }
                //             })
                //         }else{
                //             widget.toast(data.errmsg)
                //         }
                //     },
                //     error: (xhr, status) => {
                //         commonPage.loadPageStatus('loadSuccess')
                //         widget.toast('服务器异常')
                //         // error
                //     },
                //     noNetwork: () => {
                //         // 无网络的回调
                //         commonPage.loadPageStatus('loadSuccess')
                //         widget.toast('网络连接失败，请检查网络')
                //     }
                // })

                
                
            },
            firstGetData(){
                this.showEmpty = false
                this.page_no = 1
                this.sign_list = []
                this.getData()
                // alert(111)
                
            },
            getMoreData(){
                
                if(getDataEnd){
                    this.page_no ++
                    this.getData()
                }
                
            },
            getData(){
                // alert(this.page_no)
                getDataEnd = false
                // return
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/sign/user/list',
                    type: 'GET',
                    data: {
                        team_id: this.team_id,
                        project_id: this.project_id,
                        date: this.signDate,
                        page_no: this.page_no,
                        page_size: this.page_size
                    },
                    timeout: 10000,
                    success: (data) => {
                        // success
                        // alert(JSON.stringify(data))
                        console.log(data)
                        getDataEnd = true
                        commonPage.loadPageStatus('loadSuccess')
                        if(data.errno == 0){
                            this.sign_amount = data.data.sign_amount
                            this.user_name = data.data.nick_name
                            this.user_id = data.data.user_id
                            this.avatar = data.data.avatar

                            this.require_field = data.data.require_field
                            //组装数据
                            data.data.sign_data.forEach((obj1) => {
                                if(obj1.sign_type == 0){
                                    obj1.form_data.forEach((obj2) => {
                                        data.data.require_field.forEach((obj3) => {
                                            if(obj2.id == obj3.id){
                                                obj2.type = obj3.type
                                                obj2.title = obj3.info.title

                                                if(obj2.type === 'Imageview' && obj1.imgArr === undefined){
                                                    obj1.imgArr = obj2.value
                                                }
                                            }

                                        })
                                    })
                                }
                            })
                            this.sign_list.push(...data.data.sign_data)
                            if(data.data.sign_data.length < this.page_size){
                                getDataEnd = false
                            }
                            //数据数组为空时显示空态页
                            if(this.sign_list.length == 0){
                                this.showEmpty = true
                            }
                        }else{
                            widget.toast(data.errmsg)
                            // alert(JSON.stringify(data))
                        }
                    },
                    error: (xhr, status) => {
                        getDataEnd = true
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                        // error
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        getDataEnd = true
                        this.sign_amount = 0
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            selectDate (){
            
                KCApiApp.showDatePicker('2000-01-01', this.today, this.signDate || this.today, (data) => {
                    this.signDate = data.SelectedDate
                    // alert(JSON.stringify(this.signDateArr))
                    getDataEnd = true
                    this.firstGetData()
                })
            },
            checkoutLocation(){
                clientInfo.getNetworkType((data) => {
                    // alert(JSON.stringify(data))    // 网络信息
                    if(data.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }
                    console.log(this.location_info.address)
                    if(!this.location_info.address){
                        commonPage.loadPageStatus('loading')
                        location.requestPOI((data) => {
                            commonPage.loadPageStatus('loadSuccess')
                            if(data&&data.lon != undefined){
                                this.location_info.coordinate = data.lon + "," + data.lat
                                this.location_info.address = data.district + data.streetName
                                this.location_info.name = data.name
                                this.gotoEditSignInfo()
                            }else{

                                // if(util.OS()=='ios'){//判断是否需要引导开启定位
                                    KCApiApp.showLocationAuthAlertDialog()
                                // }else{
                                //     widget.toast('获取地理位置失败')
                                // }
                                this.tipMsg = '定位失败'
                            }
                        })
                    }else{
                        this.gotoEditSignInfo()
                    }
                })
                
                
            },
            requestPOI(){
                commonPage.loadPageStatus('loading')
                location.requestPOI((data) => {
                    commonPage.loadPageStatus('loadSuccess')
                    if(data.lon){
                        this.location_info.coordinate = data.lon + "," + data.lat
                        this.location_info.address = data.district + data.streetName
                        this.location_info.name = data.name
                    }else{
                        widget.toast('定位失败,请稍后重试')
                    }
                })
            },
            gotoEditSignInfo(){
                if(this.sign_list.length > 0){
                    let lastSignTimeArr = this.sign_list[0].sign_time.split(':')
                    let lastTime = new Date(this.signDateArr[0],this.signDateArr[1]-1,this.signDateArr[2],lastSignTimeArr[0],lastSignTimeArr[1]).getTime()//上次签到时间转为时间戳
                    let newTime = new Date().getTime()
                    let signTimeArea = newTime - lastTime   //签到时间差
                    // alert(signTimeArea)
                    // return
                    if(signTimeArea <= 210000){
                        widget.toast('3分钟内只能上报一次，请稍后再试')
                        return
                    }
                    if(this.sign_amount >= 50){
                        widget.toast('每日最多上报50次')
                        return
                    }
                }
                
                let tempObj = {
                    user_id: this.user_id,
                    team_id: this.team_id,
                    project_id: this.project_id,
                    address: this.location_info.address,
                    coordinate: this.location_info.coordinate,
                    position_name: this.location_info.name,
                    user_name: this.user_name
                }
                let user_info_sign = JSON.stringify(tempObj)
                let encodeStr = encodeURIComponent(`user_info_sign=${user_info_sign}`)
                window.location.href = `dmsaas://EditSignInfo?urdData=${encodeStr}`
            },
            resetLocation(){
                clientInfo.getNetworkType((data) => {
                    // alert(JSON.stringify(data))    // 网络信息
                    if(data.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }
                    let encodeStr = encodeURIComponent(`tune_distance=${this.tune_distance}`)
                    window.location.href = `dmsaas://ResetLocation?urdData=${encodeStr}`
                })
            },
            updateDate(data){
                // alert(JSON.stringify(data))
                let key = data.key
                let value = data.value
                if(key == 'position'){
                    this.location_info = value
                }
                if(key == 'editsign_timeout'){
                    // alert('editsigninfo')
                    this.requestPOI()
                }
                if(key == 'editsign_success'){
                    this.firstGetData()
                }
            },
            gotoPersonalFootprint(item){
                clientInfo.getNetworkType((data) => {
                    // alert(JSON.stringify(data))    // 网络信息
                    if(data.network == 'invalid'){
                        widget.toast("网络连接失败，请检查网络")
                        return
                    }
                    let tempObj = {
                        user_id: this.user_id,
                        user_name: this.user_name,
                        avatar: this.avatar,
                        // position_name: item.position_name,
                        // address: item.address,
                        // coordinate: item.coordinate,
                        sign_time: item.sign_time,
                        // photo: item.photo,
                        // remark: item.remark,
                        require_field: this.require_field,
                        form_data: item.form_data
                    }
                    cache.setMemoryCache('sign_info_user_foot', tempObj)
                    // let sign_info = JSON.stringify(tempObj)
                    // alert(sign_info)
                    // let encodeStr = encodeURIComponent(`sign_info=${sign_info}`)
                    window.location.href = `dmsaas://PersonalFootprint`
                })
            },
            bigPicturePreview(imgList){
                clientUi.bigPicturePreview('预览', imgList, 0)
            },
            //领取保险
            receiveInsurance(){
                if(!this.realName){
                    widget.toast('请输入您的真实姓名')
                    return
                }
                if(!this.identityCode){
                    widget.toast('请输入身份证号码')
                    return
                }
                //校验身份证
                // if(!this.identityCodeValid(this.identityCode)){
                //     widget.toast('身份证号格式错误，请重新输入')
                //     return
                // }
                
                console.log({
                        team_id: this.team_id,
                        project_id: this.project_id,
                        info: {
                            "user_id": this.user_id,
                            "id_number": this.identityCode,
                            "name": this.realName,
                            "mobile": this.mobile
                        }
                    })
                //保存参保人信息
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/insurance/user_info/set',
                    type: 'POST',
                    data: {
                        team_id: this.team_id,
                        project_id: this.project_id,
                        info: {
                            "user_id": this.user_id,
                            "id_number": this.identityCode,
                            "name": this.realName,
                            "mobile": this.mobile
                        }
                    },
                    timeout: 10000,
                    success: (data) => {
                        // success
                        // alert(JSON.stringify(data))
                        console.log(data)
                        commonPage.loadPageStatus('loadSuccess')
                        if(data.errno == 0){

                            //领取保险成功后
                            this.insurance = false
                            this.insurance_success = true
                            // setTimeout(() => {
                            //     this.insurance_success = false
                            // }, 1000)

                        }else{
                            widget.toast(data.errmsg)
                            // alert(JSON.stringify(data))
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                        // error
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })

                
            },
            latterReceive(){
                this.insurance = false
                //显示底部tabBar
                teamApi.updateBottomStatus(1)
            },
            receiveSuccess(){
                this.insurance_success = false
                //显示底部tabBar
                teamApi.updateBottomStatus(1)
            },
            //校验身份证
            identityCodeValid(code){
                let city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
                let tip = "";
                let pass= true;
                
                if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
                    tip = "身份证号格式错误";
                    pass = false;
                }else if(!city[code.substr(0,2)]){
                    tip = "地址编码错误";
                    pass = false;
                }else{
                    //18位身份证需要验证最后一位校验位
                    if(code.length == 18){
                        code = code.split('');
                        if(code[17] === 'x')code[17]='X'
                        //∑(ai×Wi)(mod 11)
                        //加权因子
                        let factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
                        //校验位
                        let parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
                        let sum = 0;
                        let ai = 0;
                        let wi = 0;
                        for (let i = 0; i < 17; i++)
                        {
                            ai = code[i];
                            wi = factor[i];
                            sum += ai * wi;
                        }
                        let last = parity[sum % 11];
                        if(parity[sum % 11] != code[17]){
                            tip = "校验位错误";
                            pass =false;
                        }
                    }
                }
                // if(!pass) alert(tip);
                return pass;
            }
        },
        created(){

            this.init();

        },
        ready(){

            window.loadData = this.updateDate
            commonPage.updateTitleBar({
                backAction: 'delselect',
                // leftDisplay: false,
                // leftText: '',
                leftAction: 'delselect',
                // rightDisplay: true,
                // rightText: '',
                // rightAction: 'doExport'
            })
            window.delselect = () => {
                // if(this.insurance){//如果有填写信息的弹窗 先让弹框消失
                //     this.insurance = false
                //     return
                // }
                cache.setMemoryCache('participantMember', [])
                commonPage.goBack(1)
            }
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/attendance.css"></style>
<style type="text/css">
    div.pad_bottom_165{
        padding-bottom: 165px;
    }
    .signin .mask .location p.mar_r_0{
        margin-right: 0px;
    }
    div.mask{
        padding:24px 12px 20px;
    }
    div.img{
        background-position: 50% 50%;
        background-size: cover;
    }
    div.icon_5{
        background-image: url(../../static/imgs/icons/icon_5.png);
    }
</style>


